import React from 'react';
import {
    View,
    Text,
    Image,
    ScrollView,
    TouchableOpacity,
    TouchableWithoutFeedback
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign'; //图标
import {checkPhonenum,checkIdcard} from '../../public/widget/Util'
import NavigationUtil from '../../navigator/NavigationUtil';
import {SafeAreaView} from 'react-navigation';
import {screen} from '../../public/common';
import DataStore, {BaseUrl} from '../../public/dao/DataStore';
import styles from './style/App';
import reanderStyle from './style/renderBox';
import DiaLog from '../../components/DiaLog';
import MyTextInput from '../../components/MytextInput';
import BackPressComponent from '../../components/BackPressComponent';
export default class LoanDetail extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: () => this.onBackPress()});
        // this.params = this.props.navigation.state.params;
        // let {item} = this.params;
        this.state = {
            showReduceNum:false,
            reduceNum:60,
            name:'',
            mobile:'',
            code:''
        }
    }
    onBackPress() {
        NavigationUtil.goBack(this.props.navigation);
        return true;
    }
    componentWillMount(){
        this._INIT();
    }
    componentDidMount(){
        this.backPress.componentDidMount();
    }
    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }
    // _INIT = ()=>{ // 加载用户数据
    //     let dataStore = new DataStore();
    //     dataStore.fetchLocalData('USERDATAS').then((json)=>{
    //         this.setState({
    //             mobile:json.data.mobile,
    //             userName:json.data.name
    //         })
    //     }).catch(()=>{
    //         this.setState({mobile:null})
    //     })
    // }
    _onChangeCodeText = (inputdata)=>{
        this.setState({
            code:inputdata
        })
    }
    reduceNumFun = ()=>{ //倒计时
        this.setState({
            reduceNum:this.state.reduceNum -= 1,
            showReduceNum:true
        }) 
        if(this.state.reduceNum != 0){
            setTimeout(() => {
                this.reduceNumFun()
            }, 1000);
        }else{
            this.setState({
                reduceNum:60,
                showReduceNum:false
            });
        }
    }
    _toLoginCheck = ()=>{
        let {name,mobile,code} = this.state;
        if(!name){
            Toast.show('用户名不能为空');
            return
        }
        if(!idcard || !checkIdcard(idcard)){
            Toast.show('身份证号不对')
            return
        }
        if(!mobile || !checkPhonenum(mobile)){
            Toast.show('手机号不对')
            return
        }
        if(!code){
            Toast.show('请输入验证码')
            return
        }
        this._toSubmit({
            name,
            mobile,
            idcard,
            code,
            ref_customer_id:2
        })
    }
    _sendCode = ()=>{
        let dataStore = new DataStore();
        dataStore.fetchData('/webservice/getvc',{mobile:this.state.mobile},'POST','',true,true).then((json)=>{
            if(json.data.errno == 0){
                Toast.show('发送成功')
                this.reduceNumFun();
            }else{
                Toast.show('发送失败');
            }
        })
    }
    _toSubmit = (params)=>{
        // console.log(params)
        let dataStore = new DataStore();
        dataStore.fetchData('/webservice/login',params,'POST','',true,true).then((json)=>{
            if(json.data.errno == 0){
                Toast.show('登录成功');
                dataStore.saveData('blackList',params)
                this.props.navigation.state.params.refresh(); //返回后刷新页面
                NavigationUtil.goBack(this.props.navigation);
                this.dialog.setModalVisible(false);
            }else{
                Toast.show(json.data.errmsg)
            }
        })
    }
    //申请
    // _open=(url,name)=>{
    //     if(this.state.mobile){
    //         let dataStore = new DataStore();
    //         dataStore.fetchLocalData('USERIDCARD').then((json)=>{
    //             if(json.data.idcard){
    //                 NavigationUtil.goPage({
    //                     name,
    //                     url
    //                 },'MyWebView')
    //             }else{
    //                 this.dialog.setModalVisible(true);
    //                 this.setState({idcard:null,url,name});
    //             }
    //         }).catch(()=>{
    //             this.dialog.setModalVisible(true);
    //             this.setState({idcard:null,url,name});
    //         })
    //     }else{
    //         NavigationUtil.goPage({
    //             refresh:()=> {
    //                 this._INIT();//传递一个方法返回时调用
    //             }
    //         },'Login')
    //     }
    // }
    // // 提交
    // _submit =()=>{
    //     let {name,url,mobile,idcard} =this.state
    //     let params = {mobile,idcard};
    //     let dataStore = new DataStore();
    //     dataStore.saveData('USERIDCARD',{idcard}) //保存用户身份证号码
    //     dataStore.fetchData('/webservice/updateinfo',params,'POST','',true,true).then((json)=>{
    //         if(json.data.errno == 0){
    //             this.dialog.setModalVisible(false);
    //             this._open(name,url);
    //         }
    //     })
    // };
    _renderBox = ()=>{
        return <View style={reanderStyle.renderBox}>
            <View>
                <View><Text>基础版信用报告</Text></View>
                <View>
                    <AntDesign
                        name={'money-collect'}
                        size={20}
                        />
                    <Text>售价19.99元</Text>
                </View>
                <View>
                    <AntDesign
                        name={'pushpin'}
                        size={20}
                        />
                    <Text>黑名单排查</Text>
                </View>
                <View>
                    <AntDesign
                        name={'pushpin'}
                        size={20}
                        />
                    <Text>贷款额度预测</Text>
                </View>
                <View>
                    <AntDesign
                        name={'pushpin'}
                        size={20}
                        />
                    <Text>贷款产品推荐</Text>
                </View>
            </View>
            <TouchableOpacity 
                style={reanderStyle.buttonFont} 
                onPress={() => {this._submit()}}>
                <Text style={reanderStyle.buttonText}>提交</Text>
            </TouchableOpacity>
        </View>
    }
    render() {
        const {pageData} = this.state;
        return (
            <SafeAreaView style={{height:screen.height}}>   
                <ScrollView style={styles.container}>
                    <View style={styles.containerTop}>
                        <View style={styles.containerTopCard}> 
                            <View style={styles.waninputStyle}>
                                <AntDesign
                                name={'user'}
                                size={20}
                                />
                                <MyTextInput 
                                    placeholder="请输入姓名"
                                    editable={true}//是否可编辑
                                    style={styles.inputStyle}//input框的基本样式
                                    onChangeText={(name=>this.setState({name}))}//输入框改变触发的函数
                                />
                            </View>
                            <View style={styles.waninputStyle}>
                                <AntDesign
                                name={'creditcard'}
                                size={20}
                                />
                                <MyTextInput 
                                    placeholder="请输入身份证号"
                                    editable={true}//是否可编辑
                                    style={styles.inputStyle}//input框的基本样式
                                    onChangeText={(idcard=>this.setState({idcard}))}//输入框改变触发的函数
                                />
                            </View>
                            <View style={styles.waninputStyle}>
                                <AntDesign
                                    name={'mobile1'}
                                    size={20}
                                />
                                <MyTextInput
                                    maxLength={11}
                                    keyboardType='numeric'
                                    placeholder="请输入手机号"
                                    editable={true}//是否可编辑
                                    style={styles.inputStyle}//input框的基本样式
                                    onChangeText={(mobile)=>this.setState({mobile})}
                                />
                            </View>
                            <View style={styles.waninputStyle}>
                                <AntDesign
                                name={'menuunfold'}
                                size={20}
                                />
                                <MyTextInput
                                    maxLength={6}
                                    placeholder="请输入验证码"
                                    editable={true}//是否可编辑
                                    style={styles.inputStyle}//input框的基本样式
                                    onChangeText={(code)=>this.setState({code})}
                                />
                                {showReduceNum ? <Text style={styles.yanzheng}>剩余{reduceNum}S</Text> : <Text style={styles.yanzheng} 
                                    onPress={()=>{
                                        if(!mobile){
                                            Toast.show('请输入手机号');
                                            return;
                                        }
                                        if(!checkPhonenum(mobile)){
                                            Toast.show('手机号格式错误');
                                            return;
                                        }
                                        this._sendCode()
                                    }}
                                >获取验证码</Text>}
                            </View>
                            <Text style={styles.jgck}>*请输入正确信息*</Text>
                        </View>
                    </View>
                    <TouchableWithoutFeedback onPress={()=>{this._toLoginCheck()}}>
                        <View style={styles.btnFont}>
                            <Text style={styles.btnText}>立即申请</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </ScrollView>
                <DiaLog
                    ref={dialog => this.dialog = dialog}
                    Datas={this._renderBox}/>
            </SafeAreaView>)
    }
}
